<template>
  <BaseDialog
    v-model:visible="visible"
    title="用户协议"
    icon="Document"
    width="800px"
    :show-footer="true"
  >
    <div class="agreement-content">
      <div class="agreement-section">
        <h3>1. 服务条款接受</h3>
        <p>
          欢迎使用 DevEnv 智能开发环境部署工具（以下简称"本服务"）。在使用本服务之前，请您仔细阅读并理解本协议的全部内容。
          您通过注册账户、登录使用本服务，即表示您已阅读、理解并同意接受本协议的全部条款和条件。
        </p>
      </div>

      <div class="agreement-section">
        <h3>2. 服务说明</h3>
        <p>
          DevEnv 是一个面向高校师生及企业培训场景的智能开发环境自动化部署平台，提供以下主要功能：
        </p>
        <ul>
          <li>开发工具链（JDK、IDEA、MySQL 等）的一键部署</li>
          <li>自动化环境配置与模板共享</li>
          <li>轻量化实时下载与脚本生成</li>
          <li>开发环境模板管理与分享</li>
        </ul>
      </div>

      <div class="agreement-section">
        <h3>3. 用户权利与义务</h3>
        <h4>3.1 用户权利</h4>
        <ul>
          <li>免费使用本服务的基础功能</li>
          <li>创建、保存和分享开发环境模板</li>
          <li>获得技术支持和服务更新</li>
          <li>随时删除个人账户和相关数据</li>
        </ul>
        
        <h4>3.2 用户义务</h4>
        <ul>
          <li>提供真实、准确的注册信息</li>
          <li>保护账户密码安全，对账户活动负责</li>
          <li>不得利用本服务进行违法或有害活动</li>
          <li>不得恶意攻击或破坏服务正常运行</li>
          <li>尊重其他用户的知识产权和使用权益</li>
        </ul>
      </div>

      <div class="agreement-section">
        <h3>4. 内容规范</h3>
        <p>用户在使用本服务时，不得发布或分享以下内容：</p>
        <ul>
          <li>违反法律法规的内容</li>
          <li>包含恶意代码、病毒或其他有害程序的模板</li>
          <li>侵犯他人知识产权的内容</li>
          <li>含有暴力、色情、仇恨言论等不当内容</li>
          <li>垃圾信息或恶意广告</li>
        </ul>
      </div>

      <div class="agreement-section">
        <h3>5. 知识产权</h3>
        <p>
          本服务的所有技术、软件、程序、数据及其他信息（包括但不限于文字、图像、图片、照片、音频、视频、图表、色彩、版面设计、电子文档）
          的知识产权均归本平台所有。用户创建的模板内容，其知识产权归用户所有，但用户授权本平台在提供服务的必要范围内使用。
        </p>
      </div>

      <div class="agreement-section">
        <h3>6. 免责声明</h3>
        <ul>
          <li>本服务按"现状"提供，不保证服务不会中断或完全无错误</li>
          <li>对于用户自行上传或生成的配置可能造成的系统损坏，本平台不承担责任</li>
          <li>因网络故障、系统维护等原因导致的服务中断，本平台不承担损失赔偿责任</li>
          <li>用户应自行备份重要数据，本平台不保证数据的永久保存</li>
        </ul>
      </div>

      <div class="agreement-section">
        <h3>7. 服务变更与终止</h3>
        <p>
          本平台保留随时修改、暂停或终止服务的权利。如有重大变更，将提前通过官网公告或邮件通知用户。
          用户违反本协议的，本平台有权限制、暂停或终止用户的服务使用权限。
        </p>
      </div>

      <div class="agreement-section">
        <h3>8. 争议解决</h3>
        <p>
          本协议的解释、效力及纠纷的解决，适用中华人民共和国法律。
          若用户和本平台之间发生任何纠纷或争议，首先应友好协商解决；
          协商不成的，应提交至本平台所在地有管辖权的人民法院诉讼解决。
        </p>
      </div>

      <div class="agreement-section">
        <h3>9. 协议更新</h3>
        <p>
          本协议可能会根据服务的发展需要进行更新。更新后的协议将在网站上公布，
          并自公布之日起生效。用户继续使用服务即表示同意接受更新后的协议。
        </p>
      </div>

      <div class="agreement-footer">
        <p><strong>最后更新时间：2025年7月29日</strong></p>
        <p>如有疑问，请联系客服邮箱：aw@639246942.xyz</p>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <BaseButton @click="visible = false">
          关闭
        </BaseButton>
        <BaseButton 
          type="primary" 
          @click="handleAgree"
        >
          我已阅读并同意
        </BaseButton>
      </div>
    </template>
  </BaseDialog>
</template>

<script setup>
import { computed } from 'vue'
import { ElMessage } from 'element-plus'
import BaseDialog from '../common/BaseDialog.vue'
import BaseButton from '../common/BaseButton.vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue', 'agree'])

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const handleAgree = () => {
  emit('agree')
  visible.value = false
  ElMessage.success('感谢您同意用户协议')
}
</script>

<style scoped>
.agreement-content {
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--spacing-md);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
}

.agreement-section {
  margin-bottom: var(--spacing-xl);
}

.agreement-section h3 {
  color: var(--color-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-xs);
  border-bottom: 2px solid var(--color-primary-100);
}

.agreement-section h4 {
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  margin: var(--spacing-lg) 0 var(--spacing-sm);
}

.agreement-section p {
  margin-bottom: var(--spacing-md);
  text-align: justify;
  color: var(--color-text-secondary);
}

.agreement-section ul {
  margin: var(--spacing-md) 0;
  padding-left: var(--spacing-xl);
}

.agreement-section li {
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-secondary);
}

.agreement-footer {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border-light);
  text-align: center;
}

.agreement-footer p {
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
}

/* 滚动条样式 */
.agreement-content::-webkit-scrollbar {
  width: 6px;
}

.agreement-content::-webkit-scrollbar-track {
  background: var(--color-fill-light);
  border-radius: var(--radius-sm);
}

.agreement-content::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-sm);
}

.agreement-content::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-dark);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .agreement-content {
    padding: var(--spacing-sm);
    max-height: 50vh;
  }
  
  .agreement-section h3 {
    font-size: var(--font-size-md);
  }
  
  .dialog-footer {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
}
</style>
